<!-- 当前组件： 自定义导航栏 -->
<template>
  <div class="navTitle" :style="{height: styleObj.height, lineHeight: styleObj.lineHeight, background: background}">
    <template v-if="useSlot">
      <slot></slot>
    </template>
    <template v-else>
      <div v-if="showBack" class="back-icon" @click="handleBack">
        <van-icon name="arrow-left" />
      </div>
      <div class="navTitle-container" :style="{transform: scale}">
        {{ title }}
      </div>
    </template>
    
  </div>
</template>

<script>
  export default {
    props: {
      title: {
        type: String,
        default: '标题'
      },
      showBack: {
        type: Boolean,
        default: true
      },
      useSlot: {
        type: Boolean,
        default: false
      },
      background: {
        type: String,
        default: '#fff'
      }
    },
    data() {
      return {
        styleObj: {},
      }
    },
    computed: {
      scale() {
        let scale = '100%';
        if(this.title && this.title.length >= 6) {
          scale = (100 - (this.title.length - 6) * 10) / 100
        }
        return `scale(${scale})`;
      }
    },
    onLoad() {
      this.styleObj = {
        height: this.globalData.height,
        lineHeight: this.globalData.lineHeight
      }
    },
    methods: {
      handleBack() {
        wx.navigateBack();
      }
    }
  }
</script>

<style lang="scss" scoped>
.navTitle {
  width: 100%;
  color: #666;
  font-size: 24px;
  display: flex;
  background: #fff;
  position: sticky;
  z-index: 100;
  top: 0;
  box-shadow: 0 0 5px rgba($color: #000000, $alpha: 0.04);
  .back-icon {
    flex-shrink: 0;
    z-index: 20;
  }
  .navTitle-container {
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 16px;
    text-align: center;
    letter-spacing: 6rpx;
    margin-left: -40px;
  }
}
</style>